<template>
  <div>
    <Button type="primary"
            @click="modalFlag = true">
      更改地址
    </Button>

    <el-dialog title="请选择要修改的图片"
               :visible.sync="modalFlag"
               width="30%"
               :before-close="handleClose">

      <el-upload ref="upload"
                 :limit="1"
                 action="https://jsonplaceholder.typicode.com/posts/"
                 list-type="picture-card"
                 :on-success="handleSucess"
                 :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="modalFlag = false">取 消</el-button>
        <el-button type="primary"
                   @click="changeSrc">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EventBus from '@/utils/eventBus'
export default {
  components: {},
  props: {
    current: Object,
  },
  data () {
    return {
      modalFlag: false,
      currentSrc: '',
      imgList: [
        {
          id: 1,
          src: 'https://img1.baidu.com/it/u=2135316162,3264555983&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
          selected: false
        },
        {
          id: 2,
          src: 'https://img.tukuppt.com/photo-big/00/00/94/6152bc0ce6e5d805.jpg',
          selected: false
        },
        {
          id: 3,
          src: 'https://img2.baidu.com/it/u=2048195462,703560066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333',
          selected: false
        }
      ],
    };
  },
  computed: {},
  watch: {
    currentSrc (newvalue) {
      if (newvalue) {

      } else {

      }
    }
  },
  methods: {
    selectImg (current) {
      this.currentSrc = current.src
      this.imgList = this.imgList.map((item) => {
        item.selected = false
        if (item.id === current.id) {
          item.selected = true
        }
        return item
      })
    },

    changeSrc () {
      console.log("this.currentSrc", this.currentSrc);
      EventBus.$emit('changeSty', this.current.id, 'src', this.currentSrc)
      this.modalFlag = false
      this.$refs.upload.clearFiles();
    },
    handleClose () {
      this.modalFlag = false
    },
    handleRemove () {

    },
    handleSucess (response, file, fileList) {
      this.currentSrc = file.url;
      console.log("file.url", file);
    }
  },
  created () {

  },
  mounted () {
    // this.currentSrc = this.current.styles.backgroundImage
  },
}
</script>
<style scoped>
.imgSty {
  width: 100px;
  height: 100px;
}
.icon {
  color: green;
  font-size: 20px;
}
</style>